<template>
  <h1>信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="changeInfo">修改个人信息</button>
  <h3>{{ job.type }}:{{ job.salary }}</h3>
</template>

<script>
  import{ref}from 'vue'


export default {
  name: 'App',
  setup(){
    //数据
    //不是响应式数据
    // let name='张三'
    // let age=18
    let name=ref('张三')
    let age=ref(18)
    //ref加工完的数据是一个对象，RefImpl的实例对象（reference implement）
    let job=ref({
      type:'工程师',
      salary:'30k'
    })

    function changeInfo(){
      // name='Gui',
      // age=21
      name.value='Gui',
      age.value=21,
      job.value.type='老师',
      job.value.salary='10k'
    }

    //必须有返回值
    return{
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>


